<template>
	<view class="commission-transfer-balance">
		<!-- <view class="card-item">
			<text>提现至：</text>
			<image class="symbol-icon" src="https://pic.616pic.com/ys_img/00/08/24/4NTxF28t5C.jpg"></image>
			<text>中国工商银行</text>
			<text style="color: gray;">(尾号6666)</text>
		</view> -->

		<uni-forms-item label="银行账号">
			<uni-easyinput v-model="account.receivingAccountNumber" placeholder="请输入银行账号" :input-border="false" />
		</uni-forms-item>
		<uni-forms-item label="开户行">
			<uni-easyinput v-model="account.accountName" placeholder="请输入开户行" :input-border="false" />
		</uni-forms-item>
		<uni-forms-item label="姓名">
			<uni-easyinput v-model="account.realName" placeholder="请输入姓名" :input-border="false" />
		</uni-forms-item>
		<uni-forms-item label="联系电话">
			<uni-easyinput v-model="account.contactNumber" placeholder="联系电话" :input-border="false" />
		</uni-forms-item>

		<view class="card-item">
			<view class="input-box">
				<text class="symbol">￥</text>
				<input v-model="transferOut" placeholder="请输入提现金额" placeholder-style="color: #dcdcdc" />
				<text class="all-text-btn" @click="onAllBtn">全部</text>
			</view>
			<view class="transferable">可提现金额：{{ transferableAmount }}元</view>
		</view>
		<button class="btn" @click="btnClick">提现</button>
	</view>
</template>

<script setup lang='ts'>
	import {
		ref,
		reactive
	} from 'vue';
	import requestHttp from '@/providers/essential/httpService.js'

	const account = reactive({
		// realName: '林盛斌',
		// accountName: '建设银行',
		// receivingAccountNumber: '3791749751335',
		// contactNumber: '160078194785',
		realName: '',
		accountName: '',
		receivingAccountNumber: '',
		contactNumber: '',
	})

	const transferOut = ref('');

	const transferableAmount = ref('345,544.00');

	const onAllBtn = () => {
		transferOut.value = transferableAmount.value;
	}

	function btnClick() {
		const param = Object.assign({
			"operatingArea": "李四",
			"role": "1",
			"user": "1",
			"withdrawalAmount": transferOut.value,
			"actualAmount": 120.5,
			"preBalance": 90.3,
			"postBalance": 100.2,
			"withdrawalStatus": "进行中",
			"withdrawalMethod": "线上",
			"creator": "消炎",
			"updater": "肖梅"
		},account) 
		console.log(param)
		requestHttp.postData('/magic/web/app/pz/withdrawal-audit/add', param).then((res) => {
		})
	}
</script>

<style scoped lang='scss'>
	.commission-transfer-balance {
		height: 100vh;
		padding: 30rpx;
		background-color: #f5f7fb;

		.card-item {
			font-weight: bold;
			padding: 30rpx;
			border-radius: 30rpx;
			margin-bottom: 30rpx;
			box-shadow: 1px 1px 5px #dcdcdc;
			background-color: #fff;

			&:nth-child(1) {
				display: flex;
				align-items: center;

				.symbol-icon {
					width: 35rpx;
					height: 35rpx;
					margin-right: 10rpx;
				}
			}

			.input-box {
				font-size: 35rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 30rpx 0;

				input {
					flex: 1;
					margin-left: 10rpx;
				}

				.symbol {
					font-size: 40rpx !important;
				}

				.all-text-btn {
					color: #44a897;
				}
			}

			.transferable {
				font-weight: 600;
				font-size: 25rpx;
				padding-top: 30rpx;
				border-top: 1px solid #dcdcdc;
			}
		}

		.btn {
			background-color: #44a897;
			color: #fff;
			font-size: 30rpx;
			margin-top: 60rpx;
			border-radius: 40rpx;
		}

	}
</style>